<template>
  <section class="leave">
    <!--列表-->
		<el-table :data="leaveList" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60" sortable>
			</el-table-column>
			<el-table-column prop="realname" label="姓名" width="120" sortable>
			</el-table-column>
			<el-table-column prop="vip_name" label="会员级别" width="180" sortable>
			</el-table-column>
			<el-table-column prop="leave_start_time" label="请假开始时间" width="180" sortable>
			</el-table-column>
      <el-table-column prop="leave_end_time" label="请假结束时间" width="180" sortable>
			</el-table-column>
			<el-table-column prop="duty_time" label="安排值班时间" width="310" sortable>
			</el-table-column>
			<el-table-column prop="created_at" label="提交时间" width="180" sortable>
			</el-table-column>
      <el-table-column label="请假事由" width="120" sortable>
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="openDialog('请假事由', scope.$index)">查看</el-button>
        </template>
			</el-table-column>
      <el-table-column prop="review_time" label="审核时间" width="180" sortable>
			</el-table-column>
      <el-table-column prop="reviewer" label="审核人" width="120" sortable>
			</el-table-column>
      <el-table-column label="审核状态" width="120" sortable>
        <template slot-scope="scope">
          <div>
            <el-tag type="primary" size="medium" plain  v-if="scope.row.status == 1">通过</el-tag>
            <el-tag type="danger"  size="medium" plain  v-else-if="scope.row.status == 2">拒绝</el-tag>
            <el-tag type="info"  size="medium" plain v-else>待审核</el-tag>
          </div>
        </template>
			</el-table-column>
			<el-table-column label="操作" width="220">
				<template slot-scope="scope">
					<div v-if="scope.row.status == 0">
						<el-button type="primary" size="mini" @click="Approve(scope.row.id, 'pass')">通过</el-button>
						<el-button type="danger"  size="mini" @click="refuseBtn(scope.row.id)">拒绝</el-button>
					</div>
          <div v-if="scope.row.status == 2">
						<el-button size="mini" @click="openDialog('拒绝原因', scope.$index)">拒绝原因</el-button>
					</div>
          <div v-if="scope.row.status == 1">
						<el-button type="primary" size="mini" disabled>通过</el-button>
						<el-button type="danger"  size="mini" disabled>拒绝</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
				<el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
						>
				</el-pagination>
			</div>
    </el-col>
    <el-dialog :title="dialogTit" :visible.sync="infoDialogVisible" width="30%" center>
			<span style="line-height:26px">{{dalogContent}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="infoDialogVisible = false">确 定</el-button>
      </span>
		</el-dialog>
    <!-- 拒绝 -->
    <el-dialog title="提示" width="30%" :visible.sync="refuseDialogVisible" @close="initData">
			<el-form  label-width="80px">
				<el-form-item label="拒绝原因" prop="taskName">
					<el-input v-model="refuseReason" type="textarea"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="refuseDialogVisible = false">取消</el-button>
				<el-button type="primary"  @click.native="refuseSubmitBtn('refuse')">确定</el-button>
			</div>
		</el-dialog>
  </section>
</template>

<script>
export default {
  data(){
    return{
      leaveList:[],
      infoDialogVisible: false,
      refuseDialogVisible: false,
      dialogTit: '',
      dalogContent: '',
      refuseReason: '',
      page: 1,
      totalPage:0,
      refuseId: ''
    }
  },
  mounted(){
    this.getUserLeaveList();
  },
  methods:{
    //获取请假列表
    async getUserLeaveList(){
			const res=await this.$api.getUserLeaveList({
				page:this.page,
				limit:16,
			})
			if(res.data.level=='success'){
				this.leaveList=res.data.data;
				this.totalPage=res.data.page_info.total;
			}else{
        this.$message({
          type: 'error',
          message: res.data.message
        });
      }
    },
    //获取改变请假状态
    async setUserLeaveStatus(id,type){
      let params = {
        id,
        type,
      }
      if(type == 'refuse'){
        params.refuse_reason = this.refuseReason
      }
			const res=await this.$api.setUserLeaveStatus(params)
			if(res.data.level=='success'){
        this.$message({
          type: 'success',
          message: res.data.message
        });
        this.getUserLeaveList();
			}else{
        this.$message({
          type: 'error',
          message: res.data.message
        });
      }
		},
    initData(){
      this.refuseReason = ''
    },
    openDialog(titie,index){
      if(titie == '请假事由'){
        this.dialogTit = '请假事由';
        this.dalogContent = this.leaveList[index].reason;
      }else{
        this.dialogTit = '拒绝原因';
        this.dalogContent = this.leaveList[index].refuse_reason;
      }
      this.infoDialogVisible = true;
    },
    //拒绝
    refuseBtn(id){
      this.refuseDialogVisible = true;
      this.refuseId = id;
    },
    //拒绝提交按钮
    refuseSubmitBtn(type){
      this.setUserLeaveStatus(this.refuseId,type)
      this.refuseDialogVisible = false;
    },
    //通过按钮
    Approve(id,type){
      this.$confirm('确认通过吗？该操作将不可逆！ 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.setUserLeaveStatus(id,type)
      })
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
<style>
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

	.task .el-dialog__body{overflow: auto;}
</style>